<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./vue.js"></script>
  <style>
    #app {
      width: 800px;
      height: 680px;
      border: 2px solid #E84E40;
      background: #fff;
      padding: 20px;
      margin: 100px auto;
    }

    h4 {
      font-size: 18px;
      color: #333333;
      padding-bottom: 20px;
      border-bottom: 1px dashed #dbdbdb;
    }

    p {
      font-size: 14px;
      color: #999;
      line-height: 45px;
      margin-bottom: 0;
    }



    .im {
      display: flex;
    }

    .im span img {
      width: 15px;
    }

    .im .level {
      margin-left: 10px;
      color: #e84c3d;
      font-size: 16px;
    }

    .t {
      font-size: 16px;
      color: #333;
      line-height: 40px;
      width: 786px;
      padding-left: 15px;
      background: #f3f3f3;
      margin-bottom: 25px;
      margin-top: 20px;
    }

    .conct ul {
      display: flex;
      justify-content: space-between;
    }

    .conct li {
      border: 1px solid #ccc;
      width: 150px;
      line-height: 50px;
      display: flex;
      justify-content: center;
    }

    .conct1 ul {
      margin-top: 20px;
      display: flex;
      justify-content: space-between;
    }

    .conct1 li {
      border: 1px solid #ccc;
      width: 150px;
      line-height: 50px;
      display: flex;
      justify-content: center;
    }

    .btn {
      width: 154px;
      height: 48px;
      border-radius: 6px;
      /* display: block; */
      text-align: center;
      line-height: 48px;
      background: #f36a5a;
      float: right;
      border: 0;
      color: #fff;
      font-size: 14px;
    }
  </style>
</head>

<body>
  <div id="app">
    <h4>给“新闻订单”的评价</h4>
    <p>请严肃认真对待此次评价哦！您的评价对我们真的真的非常重要！</p>


    <div class="block">
      <!-- <ul style="list-style: none;padding: 0;margin: 0;">
        <li class="star">
         
        </li>
      </ul> -->

      <div class="high" style="margin: 20px 0; height: 30px;">

        <span>
          <img class="star" src="./xx.png" alt="" @mouseover="show(0);showA(0, true)" @mouseout="showA(0, false)"
            @click="showB(0)">
          <img class="star" src="./xx.png" alt="" @mouseover="show(1);showA(1, true)" @mouseout="showA(1, false)"
            @click="showB(1)">
          <img class="star" src="./xx.png" alt="" @mouseover="show(2);showA(2, true)" @mouseout="showA(2, false)"
            @click="showB(2)">
          <img class="star" src="./xx.png" alt="" @mouseover="show(3);showA(3, true)" @mouseout="showA(3, false)"
            @click="showB(3)">
          <img class="star" src="./xx.png" alt="" @mouseover="show(4);showA(4, true)" @mouseout="showA(4, false)"
            @click="showB(4)">
        </span>
        <span style="margin: 0 20px; color: #f36a5a; line-height: 20px;">{{a}}</span>
      </div>


    </div>
    <div class="t">
      本次交易，乖，摸摸头 给您留下了什么印象呢？
    </div>


    <div class="conct">
      <ul style="list-style: none;padding: 0;margin: 0;">
        <li class="c">专业水平高</li>
        <li class="c">交付准时</li>
        <li class="c">效果明显</li>
        <li class="c">数据分析准确</li>

      </ul>

    </div>
    <div class="conct1" style="margin-top: 20px; float: left;">
      <ul style="list-style: none;padding: 0;margin: 0;">
        <li class="c">能力待提高</li>
        <li class="c" style="margin-left: 66px;">工期延误</li>
      </ul>
    </div>

    <div class="ex">
      <textarea v-model="text" @input="item" placeholder="请输入内容" style="width: 96%;
      height: 150px;margin-top: 20px;font-size: 15px;padding: 15px;"></textarea>
      <p>还可以输入{{ 100 - text.length }}字</p>
    </div>
    <button class="btn" @click="add">评价完成</button>
  </div>
</body>
<script>
  const { createApp, ref } = Vue;

  const app = createApp({
    setup() {

      const a = ref('')
      const list = ['差评', '较差', '中等', '一般', '好评']
      const rate = ref(-1)




      let text = ref('');
      let activeIndexes = ref([]);
      function add() {
        alert('感谢您的评价！么么哒(* ￣3)(ε￣ *)')
      }
      function item() {
        if (text.value.length > 100) {
          text.value = text.value.slice(0, 100)
        }
      }

      function abb(index) {
        if (activeIndexes.value.includes(index)) {
          activeIndexes.value = activeIndexes.value.filter(i => i !== index);
        } else {
          activeIndexes.value.push(index);
        }
      }

      function show(index) {
        a.value = list[index]
      }

      function showB(index) {
        rate.value = index;
        const stars = document.querySelectorAll('.star')
        stars.forEach((star, i) => {
          star.src = i <= index ? './x2.png' : './xx.png';
        })
      }

      function showA(index, isHover) {
        const stars = document.querySelectorAll('.star');
        stars.forEach((star, i) => {
          star.src = (rate.value !== -1 && i <= rate.value) || isHover && i <= index ? './x2.png' : './xx.png';
        })
      }


      return {

        a,
        show,
        showB,
        showA,

        text,
        item,
        add,
        abb,
        activeIndexes,
      }
    }
  }).mount('#app')
</script>

</html>